[V0_FILE]typescript:file="lib/types.ts" isMerged="true" export type ImageResult = { modelId: string modelName: string provider: string imageUrl: string | null duration: string durationMs: number cost: string success: boolean error?: string tokens?: { input: number output: number total: number } } export type TestResult = { testId: number timestamp: number prompt: string results: ImageResult[] } export type ModelConfig = { id: string name: string type: string provider: "Vercel AI Gateway" | "Fal AI" | "Prodia" cost: number color: string } [V0_FILE]typescript:file="lib/stats.ts" isMerged="true" import type { ImageResult } from "./types" export function calculateStats(images: ImageResult[]) { const successful = images.filter((img) => img.success) if (successful.length === 0) { return { avgDuration: "0", totalCost: "0.0000", fastestModel: null, } } const avgDuration = (successful.reduce((sum, img) => sum + img.durationMs, 0) / successful.length / 1000).toFixed(2) const totalCost = successful.reduce((sum, img) => sum + Number.parseFloat(img.cost.replace("$", "")), 0).toFixed(4) const fastestModel = successful.reduce((prev, curr) => (prev.durationMs < curr.durationMs ? prev : curr)) return { avgDuration, totalCost, fastestModel, } } export function sortImagesBySpeed(images: ImageResult[]): ImageResult[] { return [...images].sort((a, b) => a.durationMs - b.durationMs) } [V0_FILE]typescript:file="lib/pricing.ts" isQuickEdit="true" isMerged="true" // Fal AI pricing per megapixel export const FAL_PRICING = { "fal-ai/flux/schnell": 0.003, // per MP "fal-ai/flux/dev": 0.025, // per MP "fal-ai/flux-pro/v1.1": 0.04, // per MP "fal-ai/stable-diffusion-v35-medium": 0.02, // per MP "fal-ai/nano-banana": 0.04, // flat rate per image } // Prodia pricing by resolution and model export const PRODIA_PRICING = { "inference.flux-fast.schnell.txt2img.v1": { "1024x1024": 0.002, "512x512": 0.001 }, "inference.flux-fast.dev.txt2img.v1": { "1024x1024": 0.02 }, "inference.flux.pro11.txt2img.v1": { "1024x1024": 0.04 }, "inference.flux.dev.txt2img.v2": { "1024x1024": 0.02 }, "inference.sd15.txt2img.v1": { "512x512": 0.0025, "1024x1024": 0.008 }, } // Gemini pricing (per million tokens) export const GEMINI_PRICING = { input: 0.3, // $0.30 per 1M tokens output: 2.5, // $2.50 per 1M tokens } /** * Calculate cost for Fal AI models based on image dimensions */ export function calculateFalCost(modelType: string, width = 1024, height = 1024): number { const flatRate = FAL_PRICING[modelType as keyof typeof FAL_PRICING] return flatRate || 0 } /** * Calculate cost for Prodia models based on resolution */ export function calculateProdiaCost(modelType: string, resolution = "1024x1024"): number { const pricing = PRODIA_PRICING[modelType as keyof typeof PRODIA_PRICING] if (!pricing) return 0 // Use the specific resolution pricing or fallback to first available return pricing[resolution as keyof typeof pricing] || Object.values(pricing)[0] || 0 } /** * Calculate cost for Gemini models based on token usage */ export function calculateGeminiCost(inputTokens: number, outputTokens: number): number { const inputCost = (inputTokens / 1_000_000) * GEMINI_PRICING.input const outputCost = (outputTokens / 1_000_000) * GEMINI_PRICING.output return inputCost + outputCost } [V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.1 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.15 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.15 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.95 0 0); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.2 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.18 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.25 0 0); --accent-foreground: oklch(0.95 0 0); --destructive: oklch(0.5 0.2 25); --destructive-foreground: oklch(1 0 0); --border: oklch(0.25 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.95 0 0); --chart-1: oklch(0.8 0 0); --chart-2: oklch(0.7 0 0); --chart-3: oklch(0.6 0 0); --chart-4: oklch(0.5 0 0); --chart-5: oklch(0.4 0 0); /* Set radius to 0 to remove all rounded corners */ --radius: 0; --sidebar: oklch(0.15 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.95 0 0); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.25 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.6 0 0); --ds-red-800: oklch(0.45 0.18 25); --ds-amber-800: oklch(0.55 0.15 65); --ds-orange-800: oklch(0.5 0.16 45); --ds-yellow-800: oklch(0.6 0.14 85); --ds-lime-800: oklch(0.55 0.12 125); --ds-green-800: oklch(0.45 0.13 145); --ds-emerald-800: oklch(0.48 0.12 165); --ds-teal-800: oklch(0.5 0.11 185); --ds-cyan-800: oklch(0.52 0.1 205); --ds-blue-800: oklch(0.48 0.14 245); --ds-indigo-800: oklch(0.45 0.15 265); --ds-violet-800: oklch(0.47 0.16 285); --ds-purple-800: oklch(0.46 0.17 305); --ds-pink-800: oklch(0.5 0.16 345); /* Adding ds-700 variants for lighter chart colors */ --ds-red-700: oklch(0.55 0.18 25); --ds-amber-700: oklch(0.65 0.15 65); --ds-orange-700: oklch(0.6 0.16 45); --ds-yellow-700: oklch(0.7 0.14 85); --ds-lime-700: oklch(0.65 0.12 125); --ds-green-700: oklch(0.55 0.13 145); --ds-emerald-700: oklch(0.58 0.12 165); --ds-teal-700: oklch(0.6 0.11 185); --ds-cyan-700: oklch(0.62 0.1 205); --ds-blue-700: oklch(0.58 0.14 245); --ds-indigo-700: oklch(0.55 0.15 265); --ds-violet-700: oklch(0.57 0.16 285); --ds-purple-700: oklch(0.56 0.17 305); --ds-pink-700: oklch(0.6 0.16 345); } .dark { --background: oklch(0.1 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.15 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.15 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.95 0 0); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.2 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.18 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.25 0 0); --accent-foreground: oklch(0.95 0 0); --destructive: oklch(0.5 0.2 25); --destructive-foreground: oklch(1 0 0); --border: oklch(0.25 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.95 0 0); --sidebar: oklch(0.15 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.95 0 0); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.25 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.6 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/how-it-works-modal.tsx" isMerged="true" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" interface HowItWorksModalProps { open: boolean onClose: () => void } export function HowItWorksModal({ open, onClose }: HowItWorksModalProps) { return ( ) } [V0_FILE]typescriptreact:file="components/benchmark/image-modal.tsx" isMerged="true" "use client" import { useEffect } from "react" import { X } from "lucide-react" type ImageModalProps = { imageUrl: string | null onClose: () => void } export function ImageModal({ imageUrl, onClose }: ImageModalProps) { useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape") { onClose() } } if (imageUrl) { window.addEventListener("keydown", handleEscape) } return () => { window.removeEventListener("keydown", handleEscape) } }, [imageUrl, onClose]) if (!imageUrl) return null return (

e.stopPropagation()} />

) } [V0_FILE]typescriptreact:file="components/benchmark/stats-header.tsx" isMerged="true" import { Clock, DollarSign, Zap } from "lucide-react" import type { ImageResult } from "@/lib/types" import { calculateStats } from "@/lib/stats" type StatsHeaderProps = { images: ImageResult[] // Changed from Map to array totalModels: number loading: boolean completedCount: number } export function StatsHeader({ images, totalModels, loading, completedCount }: StatsHeaderProps) { const successfulImages = images.filter((img) => img.success) const allComplete = completedCount === totalModels && !loading const stats = calculateStats(successfulImages) return (

Progress {completedCount}/{totalModels}

{allComplete && successfulImages.length > 0 && ( <>

Average {stats.avgDuration}s

Total Cost ${stats.totalCost}

{stats.fastestModel && (

Fastest {stats.fastestModel.modelName}

)} )}

) } [V0_FILE]typescriptreact:file="components/benchmark/image-grid.tsx" isMerged="true" "use client" import { Loader2, AlertCircle, Expand } from "lucide-react" import type { ImageResult, ModelConfig } from "@/lib/types" type ImageGridProps = { models: ModelConfig[] images: ImageResult[] // Changed from Map to array to maintain arrival order loading: boolean onImageClick: (imageUrl: string) => void gridColumns?: number } export function ImageGrid({ models, images, loading, onImageClick, gridColumns = 3 }: ImageGridProps) { const gridClass = { 2: "grid-cols-1 md:grid-cols-2", 3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3", 4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4", 5: "grid-cols-1 md:grid-cols-3 lg:grid-cols-5", }[gridColumns] || "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" const imageMap = new Map(images.map((img) => [img.modelId, img])) const completedImages = images const pendingModels = models.filter((model) => !imageMap.has(model.id)) return (

{completedImages.map((image) => (

{ if (image.success && image.imageUrl) { onImageClick(image.imageUrl) } }} > {image.success && image.imageUrl ? ( <> {`${image.modelName}`}

) : image.error ? (

Failed

) : null}

{image.modelName}

{image.provider}

{image.success && ( <>

{image.duration}

{image.cost}

)}

))} {loading && pendingModels.map((model, index) => (

{/* Espacio vacío donde iría el nombre */}

))}

) } [V0_FILE]typescript:file="lib/models.ts" isQuickEdit="true" isMerged="true" import type { ModelConfig } from "./types" export const MODELS: ModelConfig[] = [ // { // id: "nano-banana-gateway", // name: "Nano Banana", // type: "gemini", // provider: "Vercel AI Gateway", // cost: 0.042, // Average cost for reference only // color: "#FF6B6B", // }, { id: "fal-nano-banana", name: "Nano Banana", type: "fal-ai/nano-banana", provider: "Fal AI", cost: 0.039, color: "#4ECDC4", }, { id: "fal-flux-schnell", name: "FLUX Schnell", type: "fal-ai/flux/schnell", provider: "Fal AI", cost: 0.003, // per MP for 1MP image color: "#45B7D1", }, { id: "fal-flux-dev", name: "FLUX Dev", type: "fal-ai/flux/dev", provider: "Fal AI", cost: 0.025, // per MP for 1MP image color: "#96CEB4", }, { id: "fal-flux-pro", name: "FLUX Pro v1.1", type: "fal-ai/flux-pro/v1.1", provider: "Fal AI", cost: 0.04, // per MP for 1MP image color: "#FFEAA7", }, { id: "fal-sd35-medium", name: "Stable Diffusion 3.5 Medium", type: "fal-ai/stable-diffusion-v35-medium", provider: "Fal AI", cost: 0.065, // per MP for 1MP image color: "#DFE6E9", }, { id: "flux-fast-schnell", name: "Flux Fast Schnell", type: "inference.flux-fast.schnell.txt2img.v1", provider: "Prodia", cost: 0.002, // for 1024x1024 color: "#74B9FF", }, { id: "flux-fast-dev", name: "Flux Fast Dev", type: "inference.flux-fast.dev.txt2img.v1", provider: "Prodia", cost: 0.02, // for 1024x1024 color: "#A29BFE", }, { id: "flux-pro-11", name: "Flux Pro 1.1", type: "inference.flux.pro11.txt2img.v1", provider: "Prodia", cost: 0.04, // for 1024x1024 color: "#FD79A8", }, { id: "flux-dev", name: "Flux Dev", type: "inference.flux.dev.txt2img.v2", provider: "Prodia", cost: 0.02, // for 1024x1024 color: "#FDCB6E", }, { id: "sd15", name: "Stable Diffusion 1.5", type: "inference.sd15.txt2img.v1", provider: "Prodia", cost: 0.0025, // for 512x512 color: "#6C5CE7", }, { id: "grok-2-image", name: "Grok 2 Image", type: "grok-2-image-1212", provider: "xAI", cost: 0.07, // per image color: "#FF6B35", }, ] export const MODEL_PRICING: Record = MODELS.reduce( (acc, model) => { acc[model.id] = model.cost return acc }, {} as Record, ) [V0_FILE]typescript:file="app/api/generate-single/route.ts" isQuickEdit="true" isMerged="true" import type { NextRequest } from "next/server" import { createProdia } from "prodia/v2" import * as fal from "@fal-ai/serverless-client" import { Buffer } from "buffer" import { calculateFalCost, calculateProdiaCost } from "@/lib/pricing" fal.config({ credentials: process.env.FAL_KEY, }) export async function POST(request: NextRequest) { const { prompt, model } = await request.json() if (!prompt || !model) { return Response.json({ error: "Prompt and model are required" }, { status: 400 }) } const startTime = performance.now() try { if (model.provider === "xAI") { const xaiApiKey = process.env.XAI_API_KEY if (!xaiApiKey) throw new Error("XAI_API_KEY not configured") const response = await fetch("https://api.x.ai/v1/images/generations", { method: "POST", headers: { Authorization: `Bearer ${xaiApiKey}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: model.type, prompt, }), }) if (!response.ok) { const errorData = await response.json() throw new Error(`xAI API error: ${errorData.error?.message || response.statusText}`) } const result = await response.json() const endTime = performance.now() const durationMs = endTime - startTime const duration = (durationMs / 1000).toFixed(2) const imageUrl = result.data?.[0]?.url if (!imageUrl) throw new Error("No image was generated") // Download and convert to base64 const imageResponse = await fetch(imageUrl) const imageBuffer = await imageResponse.arrayBuffer() const base64Image = Buffer.from(imageBuffer).toString("base64") const base64Url = `data:image/jpeg;base64,${base64Image}` return Response.json({ modelId: model.id, modelName: model.name, provider: model.provider, imageUrl: base64Url, duration: `${duration}s`, durationMs, cost: `$${model.cost.toFixed(4)}`, success: true, }) } if (model.provider === "Fal AI") { const result = await fal.subscribe(model.type, { input: { prompt, image_size: "square_hd", num_inference_steps: model.type.includes("schnell") ? 4 : 28, num_images: 1, }, logs: false, onQueueUpdate: () => {}, }) const endTime = performance.now() const durationMs = endTime - startTime const duration = (durationMs / 1000).toFixed(2) const imageUrl = result.images?.[0]?.url if (!imageUrl) throw new Error("No image was generated") const imageResponse = await fetch(imageUrl) const imageBuffer = await imageResponse.arrayBuffer() const base64Image = Buffer.from(imageBuffer).toString("base64") const base64Url = `data:image/jpeg;base64,${base64Image}` const imageWidth = result.images[0]?.width || 1024 const imageHeight = result.images[0]?.height || 1024 const cost = calculateFalCost(model.type, imageWidth, imageHeight) return Response.json({ modelId: model.id, modelName: model.name, provider: model.provider, imageUrl: base64Url, duration: `${duration}s`, durationMs, cost: `$${cost.toFixed(4)}`, success: true, }) } const token = process.env.PRODIA_TOKEN if (!token) throw new Error("PRODIA_TOKEN not configured") const prodia = createProdia({ token }) const job = await prodia.job({ type: model.type as any, config: { prompt }, }) const endTime = performance.now() const durationMs = endTime - startTime const duration = (durationMs / 1000).toFixed(2) const imageBuffer = await job.arrayBuffer() const base64Image = Buffer.from(imageBuffer).toString("base64") const imageUrl = `data:image/jpeg;base64,${base64Image}` const resolution = "1024x1024" // Prodia default const cost = calculateProdiaCost(model.type, resolution) return Response.json({ modelId: model.id, modelName: model.name, provider: model.provider, imageUrl, duration: `${duration}s`, durationMs, cost: `$${cost.toFixed(4)}`, success: true, }) } catch (error) { const endTime = performance.now() const durationMs = endTime - startTime const duration = (durationMs / 1000).toFixed(2) return Response.json({ modelId: model.id, modelName: model.name, provider: model.provider, imageUrl: null, duration: `${duration}s`, durationMs, cost: "$0.0000", success: false, error: error instanceof Error ? error.message : "Unknown error", }) } } [V0_FILE]typescriptreact:file="components/benchmark/performance-ranking.tsx" isQuickEdit="true" isMerged="true" "use client" import type { ImageResult } from "@/lib/types" import { sortImagesBySpeed } from "@/lib/stats" type PerformanceRankingProps = { images: ImageResult[] } const modelColors: Record = { "nano-banana-gateway": "var(--ds-green-700)", "fal-nano-banana": "var(--ds-blue-700)", "fal-flux-schnell": "var(--ds-amber-700)", "fal-flux-dev": "var(--ds-red-700)", "fal-flux-pro": "var(--ds-purple-700)", "fal-sd35-medium": "var(--ds-cyan-700)", "flux-fast-schnell": "var(--ds-pink-700)", "flux-fast-dev": "var(--ds-lime-700)", "flux-pro-11": "var(--ds-orange-700)", "flux-dev": "var(--ds-teal-700)", sd15: "var(--ds-indigo-700)", "grok-2-image": "var(--ds-violet-700)", } export function PerformanceRanking({ images }: PerformanceRankingProps) { const sortedImages = sortImagesBySpeed(images) const maxDuration = Math.max(...images.map((img) => img.durationMs), 1) return (

{sortedImages.map((image, index) => { const percentage = (image.durationMs / maxDuration) * 100 const barColor = modelColors[image.modelId] || "var(--ds-gray-700)" return (

{index + 1}

{image.modelName} {image.provider}

{image.duration} {image.cost}

) })}

) } [V0_FILE]typescript:file="lib/auth.ts" isMerged="true" export const AUTH_CONFIG = { clientId: process.env.NEXT_PUBLIC_VERCEL_CLIENT_ID!, clientSecret: process.env.VERCEL_CLIENT_SECRET!, redirectUri: process.env.NEXT_PUBLIC_VERCEL_REDIRECT_URI!, authorizationEndpoint: "https://vercel.com/oauth/authorize", tokenEndpoint: "https://vercel.com/api/login/oauth/token", scopes: ["openid", "email", "profile"], } // Generate PKCE code verifier and challenge export function generateCodeVerifier(): string { const array = new Uint8Array(32) crypto.getRandomValues(array) return base64UrlEncode(array) } export async function generateCodeChallenge(verifier: string): Promise { const encoder = new TextEncoder() const data = encoder.encode(verifier) const hash = await crypto.subtle.digest("SHA-256", data) return base64UrlEncode(new Uint8Array(hash)) } function base64UrlEncode(array: Uint8Array): string { const base64 = btoa(String.fromCharCode(...array)) return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "") } export function generateState(): string { const array = new Uint8Array(16) crypto.getRandomValues(array) return base64UrlEncode(array) } [V0_FILE]typescript:file="app/api/auth/login/route.ts" isMerged="true" import { NextResponse } from "next/server" import { AUTH_CONFIG, generateCodeVerifier, generateCodeChallenge, generateState } from "@/lib/auth" export async function GET() { try { const codeVerifier = generateCodeVerifier() const codeChallenge = await generateCodeChallenge(codeVerifier) const state = generateState() // Build authorization URL const params = new URLSearchParams({ client_id: AUTH_CONFIG.clientId, redirect_uri: AUTH_CONFIG.redirectUri, response_type: "code", scope: AUTH_CONFIG.scopes.join(" "), state, code_challenge: codeChallenge, code_challenge_method: "S256", }) const authUrl = `${AUTH_CONFIG.authorizationEndpoint}?${params.toString()}` // Store code_verifier and state in cookies for callback verification const response = NextResponse.redirect(authUrl) response.cookies.set("code_verifier", codeVerifier, { httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "lax", maxAge: 60 * 10, // 10 minutes path: "/", }) response.cookies.set("oauth_state", state, { httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "lax", maxAge: 60 * 10, // 10 minutes path: "/", }) return response } catch (error) { console.error("[v0] Auth login error:", error) return NextResponse.json({ error: "Failed to initialize OAuth flow" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/user/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" function parseJwt(token: string) { try { const base64Url = token.split(".")[1] const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/") const jsonPayload = decodeURIComponent( atob(base64) .split("") .map((c) => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)) .join(""), ) return JSON.parse(jsonPayload) } catch (error) { return null } } export async function GET(request: NextRequest) { try { const idToken = request.cookies.get("id_token")?.value if (!idToken) { return NextResponse.json({ user: null }, { status: 200 }) } // Decode ID token (JWT) to get user info const payload = parseJwt(idToken) if (!payload) { return NextResponse.json({ user: null }, { status: 200 }) } return NextResponse.json({ user: { id: payload.sub, name: payload.name, username: payload.preferred_username, email: payload.email, picture: payload.picture, }, }) } catch (error) { console.error("[v0] Get user error:", error) return NextResponse.json({ error: "Failed to get user" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/logout/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const response = NextResponse.json({ success: true }) // Clear auth cookies response.cookies.delete("access_token") response.cookies.delete("id_token") return response } catch (error) { console.error("[v0] Logout error:", error) return NextResponse.json({ error: "Failed to logout" }, { status: 500 }) } } [V0_FILE]xml:file="public/vercel-logo.svg" isMerged="true" [V0_FILE]typescriptreact:file="components/auth/user-menu.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { LogOut, User } from "lucide-react" import { Button } from "@/components/ui/button" type UserMenuProps = { user: { name: string username: string email: string picture?: string } } export function UserMenu({ user }: UserMenuProps) { const [isOpen, setIsOpen] = useState(false) const handleLogout = async () => { await fetch("/api/auth/logout", { method: "POST" }) window.location.reload() } return (

{isOpen && ( <>

setIsOpen(false)} />

{user.name}

{user.email}

)}

) } [V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true" import { createBrowserClient } from "@supabase/ssr" export function createClient() { return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) } [V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function createClient() { const cookieStore = await cookies() return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // The "setAll" method was called from a Server Component. // This can be ignored if you have middleware refreshing // user sessions. } }, }, }) } [V0_FILE]sql:file="scripts/001_create_tracking_tables.sql" isMerged="true" -- IP Usage Tracking Table CREATE TABLE IF NOT EXISTS public.ip_usage ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), ip_address TEXT NOT NULL UNIQUE, prompt_count INTEGER DEFAULT 0, last_used_at TIMESTAMPTZ DEFAULT NOW(), created_at TIMESTAMPTZ DEFAULT NOW() ); -- User Login Tracking Table CREATE TABLE IF NOT EXISTS public.user_logins ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), vercel_user_id TEXT NOT NULL UNIQUE, email TEXT, name TEXT, avatar_url TEXT, first_login_at TIMESTAMPTZ DEFAULT NOW(), last_login_at TIMESTAMPTZ DEFAULT NOW(), total_prompts INTEGER DEFAULT 0, created_at TIMESTAMPTZ DEFAULT NOW() ); -- Prompt Generation History CREATE TABLE IF NOT EXISTS public.prompt_history ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), ip_address TEXT, vercel_user_id TEXT, prompt TEXT NOT NULL, model_count INTEGER NOT NULL, success_count INTEGER NOT NULL, total_cost DECIMAL(10, 4), created_at TIMESTAMPTZ DEFAULT NOW() ); -- Enable Row Level Security (RLS) ALTER TABLE public.ip_usage ENABLE ROW LEVEL SECURITY; ALTER TABLE public.user_logins ENABLE ROW LEVEL SECURITY; ALTER TABLE public.prompt_history ENABLE ROW LEVEL SECURITY; -- RLS Policies for ip_usage (allow all reads, service role can write) CREATE POLICY "Allow public read access to ip_usage" ON public.ip_usage FOR SELECT USING (true); CREATE POLICY "Allow service role to manage ip_usage" ON public.ip_usage FOR ALL USING (true); -- RLS Policies for user_logins (allow all reads, service role can write) CREATE POLICY "Allow public read access to user_logins" ON public.user_logins FOR SELECT USING (true); CREATE POLICY "Allow service role to manage user_logins" ON public.user_logins FOR ALL USING (true); -- RLS Policies for prompt_history (allow all reads, service role can write) CREATE POLICY "Allow public read access to prompt_history" ON public.prompt_history FOR SELECT USING (true); CREATE POLICY "Allow service role to manage prompt_history" ON public.prompt_history FOR ALL USING (true); -- Create indexes for performance CREATE INDEX IF NOT EXISTS idx_ip_usage_ip_address ON public.ip_usage(ip_address); CREATE INDEX IF NOT EXISTS idx_user_logins_vercel_user_id ON public.user_logins(vercel_user_id); CREATE INDEX IF NOT EXISTS idx_prompt_history_created_at ON public.prompt_history(created_at DESC); [V0_FILE]typescript:file="app/api/track-login/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function POST(request: NextRequest) { try { const supabase = await createClient() const { userId, email, name, avatarUrl } = await request.json() if (!userId) { return NextResponse.json({ error: "User ID is required" }, { status: 400 }) } // Check if user exists const { data: existingUser, error: fetchError } = await supabase .from("user_logins") .select("*") .eq("vercel_user_id", userId) .single() if (fetchError && fetchError.code !== "PGRST116") { throw fetchError } if (existingUser) { // Update existing user const { data, error } = await supabase .from("user_logins") .update({ email, name, avatar_url: avatarUrl, last_login_at: new Date().toISOString(), }) .eq("vercel_user_id", userId) .select() .single() if (error) throw error return NextResponse.json({ success: true, user: data }) } else { // Create new user record const { data, error } = await supabase .from("user_logins") .insert({ vercel_user_id: userId, email, name, avatar_url: avatarUrl, }) .select() .single() if (error) throw error return NextResponse.json({ success: true, user: data, isNewUser: true }) } } catch (error) { console.error("Error tracking login:", error) return NextResponse.json({ error: "Failed to track login" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/track-prompt/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function POST(request: NextRequest) { try { const supabase = await createClient() const { prompt, modelCount, successCount, totalCost, userId } = await request.json() // Get IP address from headers const forwarded = request.headers.get("x-forwarded-for") const ip = forwarded ? forwarded.split(",")[0] : request.headers.get("x-real-ip") || "unknown" // Save prompt to history const { data, error } = await supabase .from("prompt_history") .insert({ ip_address: ip, vercel_user_id: userId || null, prompt, model_count: modelCount, success_count: successCount, total_cost: totalCost, }) .select() .single() if (error) throw error // If user is logged in, update their total prompts if (userId) { const { data: user, error: userError } = await supabase .from("user_logins") .select("total_prompts") .eq("vercel_user_id", userId) .single() if (user && !userError) { await supabase .from("user_logins") .update({ total_prompts: user.total_prompts + 1, }) .eq("vercel_user_id", userId) } } return NextResponse.json({ success: true, data }) } catch (error) { console.error("Error tracking prompt:", error) return NextResponse.json({ error: "Failed to track prompt" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/analytics/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function GET() { try { const supabase = await createClient() // Get total users const { count: totalUsers, error: usersError } = await supabase .from("user_logins") .select("*", { count: "exact", head: true }) if (usersError) throw usersError // Get total prompts const { count: totalPrompts, error: promptsError } = await supabase .from("prompt_history") .select("*", { count: "exact", head: true }) if (promptsError) throw promptsError // Get anonymous prompts (prompts with IP but no user ID) const { count: anonymousPrompts, error: anonError } = await supabase .from("prompt_history") .select("*", { count: "exact", head: true }) .is("vercel_user_id", null) if (anonError) throw anonError // Get recent users (last 10) const { data: recentUsers, error: recentError } = await supabase .from("user_logins") .select("*") .order("last_login_at", { ascending: false }) .limit(10) if (recentError) throw recentError // Get top users by prompt count const { data: topUsers, error: topError } = await supabase .from("user_logins") .select("*") .order("total_prompts", { ascending: false }) .limit(10) if (topError) throw topError return NextResponse.json({ totalUsers: totalUsers || 0, totalPrompts: totalPrompts || 0, anonymousPrompts: anonymousPrompts || 0, authenticatedPrompts: (totalPrompts || 0) - (anonymousPrompts || 0), recentUsers, topUsers, }) } catch (error) { console.error("Error fetching analytics:", error) return NextResponse.json({ error: "Failed to fetch analytics" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/callback/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { AUTH_CONFIG } from "@/lib/auth" export async function GET(request: NextRequest) { try { const searchParams = request.nextUrl.searchParams const code = searchParams.get("code") const state = searchParams.get("state") const error = searchParams.get("error") if (error) { const errorDescription = searchParams.get("error_description") console.error("[v0] OAuth error:", error, errorDescription) return NextResponse.redirect( new URL(`/?auth_error=${encodeURIComponent(errorDescription || error)}`, request.url), ) } if (!code || !state) { return NextResponse.redirect(new URL("/?auth_error=missing_code_or_state", request.url)) } const storedState = request.cookies.get("oauth_state")?.value if (state !== storedState) { return NextResponse.redirect(new URL("/?auth_error=invalid_state", request.url)) } const codeVerifier = request.cookies.get("code_verifier")?.value if (!codeVerifier) { return NextResponse.redirect(new URL("/?auth_error=missing_code_verifier", request.url)) } const tokenResponse = await fetch(AUTH_CONFIG.tokenEndpoint, { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded", }, body: new URLSearchParams({ grant_type: "authorization_code", client_id: AUTH_CONFIG.clientId, client_secret: AUTH_CONFIG.clientSecret, code, code_verifier: codeVerifier, redirect_uri: AUTH_CONFIG.redirectUri, }), }) if (!tokenResponse.ok) { const errorData = await tokenResponse.text() console.error("[v0] Token exchange failed:", errorData) return NextResponse.redirect(new URL("/?auth_error=token_exchange_failed", request.url)) } const tokens = await tokenResponse.json() const idToken = tokens.id_token let userId = null let userEmail = null let userName = null let userAvatar = null if (idToken) { try { const base64Url = idToken.split(".")[1] const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/") const jsonPayload = decodeURIComponent( atob(base64) .split("") .map((c) => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)) .join(""), ) const payload = JSON.parse(jsonPayload) userId = payload.sub userEmail = payload.email userName = payload.name userAvatar = payload.picture // Track login in database if (userId) { await fetch(new URL("/api/track-login", request.url).toString(), { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId, email: userEmail, name: userName, avatarUrl: userAvatar, }), }) } } catch (parseError) { console.error("[v0] Failed to parse ID token:", parseError) } } const response = NextResponse.redirect(new URL("/", request.url)) response.cookies.set("access_token", tokens.access_token, { httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "lax", maxAge: tokens.expires_in || 3600, path: "/", }) if (tokens.id_token) { response.cookies.set("id_token", tokens.id_token, { httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "lax", maxAge: tokens.expires_in || 3600, path: "/", }) } response.cookies.delete("code_verifier") response.cookies.delete("oauth_state") return response } catch (error) { console.error("[v0] Callback error:", error) return NextResponse.redirect(new URL("/?auth_error=unexpected_error", request.url)) } } [V0_FILE]typescript:file="app/api/track-ip/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function POST(request: NextRequest) { try { const supabase = await createClient() // Get IP address from headers const forwarded = request.headers.get("x-forwarded-for") const ip = forwarded ? forwarded.split(",")[0] : request.headers.get("x-real-ip") || "unknown" const { data: existingIp, error: fetchError } = await supabase .from("ip_usage") .select("*") .eq("ip_address", ip) .maybeSingle() if (fetchError) { throw fetchError } if (existingIp) { // Update existing IP const { data, error } = await supabase .from("ip_usage") .update({ prompt_count: existingIp.prompt_count + 1, last_used_at: new Date().toISOString(), }) .eq("ip_address", ip) .select() .single() if (error) throw error return NextResponse.json({ promptCount: data.prompt_count, canGenerate: data.prompt_count < 1, }) } else { // Create new IP record const { data, error } = await supabase .from("ip_usage") .insert({ ip_address: ip, prompt_count: 1, }) .select() .single() if (error) throw error return NextResponse.json({ promptCount: data.prompt_count, canGenerate: data.prompt_count < 1, }) } } catch (error) { console.error("Error tracking IP:", error) return NextResponse.json({ error: "Failed to track IP" }, { status: 500 }) } } export async function GET(request: NextRequest) { try { const supabase = await createClient() // Get IP address from headers const forwarded = request.headers.get("x-forwarded-for") const ip = forwarded ? forwarded.split(",")[0] : request.headers.get("x-real-ip") || "unknown" const { data, error } = await supabase.from("ip_usage").select("*").eq("ip_address", ip).maybeSingle() if (error) { throw error } return NextResponse.json({ promptCount: data?.prompt_count || 0, canGenerate: (data?.prompt_count || 0) < 1, }) } catch (error) { console.error("Error fetching IP:", error) return NextResponse.json({ error: "Failed to fetch IP" }, { status: 500 }) } } [V0_FILE]typescript:file="lib/storage.ts" isEdit="true" isMerged="true" import type { TestResult } from "./types" export function loadHistory(): TestResult[] { return [] } export function saveHistory(_history: TestResult[]): void { // No-op: history only in memory } export function clearHistory(): void { // No-op: history only in memory } [V0_FILE]typescriptreact:file="components/auth/sign-in-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { X } from "lucide-react" import { Button } from "@/components/ui/button" type SignInModalProps = { onClose: () => void currentGenerations?: Array<{ prompt: string timestamp: number images: Array<{ modelId: string modelName: string provider: string imageUrl: string | null duration: string durationMs: number cost: string success: boolean error?: string }> }> } export function SignInModal({ onClose, currentGenerations }: SignInModalProps) { const handleSignIn = () => { if (currentGenerations && currentGenerations.length > 0) { try { sessionStorage.setItem("saved_generations", JSON.stringify(currentGenerations)) } catch (e) { console.error("Failed to save generations:", e) } } window.location.href = "/api/auth/login" } return (

e.stopPropagation()}>

Sign in to continue

You've used your free prompt. Sign in with Vercel to continue testing models.

Free and unlimited access after signing in

) } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "prodia": "1.6.0", "ai": "5.0.86", "@ai-sdk/google": "2.0.27", "@fal-ai/serverless-client": "0.15.0", "buffer": "6.0.3", "html-to-image": "^1.11.11", "@supabase/ssr": "0.7.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "AI Image Generation Benchmark - Model Performance Comparison", description: "Compare image generation speed, cost, and quality across multiple AI models and providers", generator: "v0.app", icons: { icon: "/favicon.svg", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescript:file="app/api/check-user-limit/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function GET(request: NextRequest) { try { const supabase = await createClient() const { searchParams } = new URL(request.url) const userId = searchParams.get("userId") if (!userId) { return NextResponse.json({ canGenerate: false, promptsUsed: 0, promptsLimit: 5 }) } // Get user's total prompts const { data: user, error } = await supabase .from("user_logins") .select("total_prompts") .eq("vercel_user_id", userId) .maybeSingle() if (error) throw error const promptsUsed = user?.total_prompts || 0 const promptsLimit = 5 const canGenerate = promptsUsed < promptsLimit return NextResponse.json({ canGenerate, promptsUsed, promptsLimit, }) } catch (error) { console.error("Error checking user limit:", error) return NextResponse.json({ error: "Failed to check user limit" }, { status: 500 }) } } [V0_FILE]xml:file="public/logo.svg" isEdit="true" isMerged="true" [V0_FILE]xml:file="public/favicon.svg" isEdit="true" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useRef, useState, useEffect } from "react" import type React from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Loader2, HelpCircle, Grid2X2, LogIn } from "lucide-react" import { MODELS } from "@/lib/models" import { saveHistory } from "@/lib/storage" import type { ImageResult, TestResult } from "@/lib/types" import { StatsHeader } from "@/components/benchmark/stats-header" import { ImageGrid } from "@/components/benchmark/image-grid" import { PerformanceRanking } from "@/components/benchmark/performance-ranking" import { HistoricalChart } from "@/components/benchmark/historical-chart" import { ImageModal } from "@/components/benchmark/image-modal" import { HowItWorksModal } from "@/components/how-it-works-modal" import { SignInModal } from "@/components/auth/sign-in-modal" import { LimitReachedModal } from "@/components/auth/limit-reached-modal" import { UserMenu } from "@/components/auth/user-menu" type GenerationGroup = { prompt: string timestamp: number images: ImageResult[] } type User = { id: string name: string username: string email: string picture?: string } export default function Home() { const [prompt, setPrompt] = useState("") const [generations, setGenerations] = useState([]) const [loading, setLoading] = useState(false) const [error, setError] = useState("") const [history, setHistory] = useState([]) const [expandedImage, setExpandedImage] = useState(null) const [showHowItWorks, setShowHowItWorks] = useState(false) const [hasRunTest, setHasRunTest] = useState(false) const [completedCount, setCompletedCount] = useState(0) const [sidebarWidth, setSidebarWidth] = useState(400) const [isResizing, setIsResizing] = useState(false) const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false) const [isHoveringHandle, setIsHoveringHandle] = useState(false) const [isHoveringCollapsedArea, setIsHoveringCollapsedArea] = useState(false) const [resizeStartX, setResizeStartX] = useState(0) const [hasDragged, setHasDragged] = useState(false) const [gridColumns, setGridColumns] = useState(3) const sidebarRef = useRef(null) const [user, setUser] = useState(null) const [showSignInModal, setShowSignInModal] = useState(false) const [showLimitReachedModal, setShowLimitReachedModal] = useState(false) const [signingIn, setSigningIn] = useState(false) useEffect(() => { const isSigningIn = localStorage.getItem("signing_in") === "true" if (isSigningIn) { setSigningIn(true) } }, []) useEffect(() => { const initializeAuth = async () => { try { const userRes = await fetch("/api/auth/user") const userData = await userRes.json() if (userData.user) { localStorage.removeItem("signing_in") setSigningIn(false) setUser(userData.user) const savedGenerations = sessionStorage.getItem("saved_generations") const savedPrompt = sessionStorage.getItem("saved_prompt") if (savedGenerations) { try { const parsedGenerations = JSON.parse(savedGenerations) setGenerations(parsedGenerations) setHasRunTest(true) if (parsedGenerations.length > 0) { const restoredHistory: TestResult[] = parsedGenerations.map((gen: GenerationGroup, index: number) => ({ testId: index + 1, timestamp: gen.timestamp, prompt: gen.prompt, results: gen.images, })) setHistory(restoredHistory) saveHistory(restoredHistory) setPrompt(parsedGenerations[parsedGenerations.length - 1].prompt) } sessionStorage.removeItem("saved_generations") } catch (e) { console.error("Failed to restore generations:", e) } } // Restore the prompt that was typed but not submitted if (savedPrompt) { setPrompt(savedPrompt) sessionStorage.removeItem("saved_prompt") } // Track login await fetch("/api/track-login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: userData.user.id, email: userData.user.email, name: userData.user.name, avatarUrl: userData.user.picture, }), }) } } catch (err) { console.error("Failed to initialize auth:", err) } } initializeAuth() }, []) const handleTitleClick = () => { setHasRunTest(false) setGenerations([]) setCompletedCount(0) setLoading(false) setError("") setPrompt("") sessionStorage.clear() } const checkCanGenerate = async (): Promise => { // Check logged-in user limit (5 prompts) if (user) { try { const response = await fetch(`/api/check-user-limit?userId=${user.id}`) const data = await response.json() if (!data.canGenerate) { setShowLimitReachedModal(true) return false } return true } catch (error) { console.error("Failed to check user limit:", error) return false } } // Check IP limit for non-logged users (1 prompt) try { const response = await fetch("/api/track-ip") const data = await response.json() if (!data.canGenerate) { if (prompt.trim()) { sessionStorage.setItem("saved_prompt", prompt) } setShowSignInModal(true) return false } return true } catch (error) { console.error("Failed to check IP usage:", error) return false } } const generateImages = async () => { if (!prompt.trim()) { setError("Please enter a prompt") return } setLoading(true) setError("") const currentPrompt = prompt const newGeneration: GenerationGroup = { prompt: currentPrompt, timestamp: Date.now(), images: [], } // Show optimistic UI immediately setGenerations((prev) => [...prev, newGeneration]) setCompletedCount(0) setHasRunTest(true) // Check permissions in background const canGenerate = await checkCanGenerate() if (!canGenerate) { // Revert optimistic UI if permission check fails setLoading(false) setGenerations((prev) => prev.slice(0, -1)) setHasRunTest((prev) => prev.length > 0) return } // Track IP usage for non-logged users if (!user) { try { await fetch("/api/track-ip", { method: "POST" }) } catch (error) { console.error("Failed to track IP:", error) } } try { const promises = MODELS.map(async (model) => { try { const response = await fetch("/api/generate-single", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: currentPrompt, model }), }) const result: ImageResult = await response.json() return { result, completionTime: performance.now() } } catch (err) { const errorResult: ImageResult = { modelId: model.id, modelName: model.name, provider: model.provider, imageUrl: null, duration: "0s", durationMs: 0, cost: "$0.0000", success: false, error: err instanceof Error ? err.message : "Unknown error", } return { result: errorResult, completionTime: performance.now() } } }) const completedResults: Array<{ result: ImageResult; completionTime: number }> = [] for (const promise of promises) { promise.then((data) => { completedResults.push(data) completedResults.sort((a, b) => a.completionTime - b.completionTime) setGenerations((prev) => { const updated = [...prev] const lastIndex = updated.length - 1 if (lastIndex >= 0) { updated[lastIndex] = { ...updated[lastIndex], images: completedResults.map((r) => r.result), } } return updated }) setCompletedCount(completedResults.length) }) } await Promise.all(promises) // Save to history and track prompt setGenerations((prev) => { const lastGen = prev[prev.length - 1] if (lastGen) { const newTest: TestResult = { testId: history.length + 1, timestamp: Date.now(), prompt: currentPrompt, results: lastGen.images, } const updatedHistory = [...history, newTest] setHistory(updatedHistory) saveHistory(updatedHistory) const successCount = lastGen.images.filter((img) => img.success).length const totalCost = lastGen.images .filter((img) => img.success) .reduce((sum, img) => sum + Number.parseFloat(img.cost.replace("$", "")), 0) fetch("/api/track-prompt", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: currentPrompt, modelCount: MODELS.length, successCount, totalCost: totalCost.toFixed(4), userId: user?.id || null, }), }).catch((err) => console.error("Failed to track prompt:", err)) } return prev }) } catch (err) { setError(err instanceof Error ? err.message : "Unknown error") } finally { setLoading(false) } } const handleMouseDown = (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() const currentWidth = isSidebarCollapsed ? 0 : sidebarWidth setResizeStartX(e.clientX) setIsResizing(true) setHasDragged(false) } useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!isResizing) return const dragDistance = Math.abs(e.clientX - resizeStartX) if (dragDistance < 5) return if (!hasDragged) { setHasDragged(true) if (isSidebarCollapsed) { setIsSidebarCollapsed(false) } } const distanceFromRight = window.innerWidth - e.clientX const newWidth = Math.max(0, distanceFromRight - 32) if (newWidth < 200) { if (!isSidebarCollapsed) { setIsSidebarCollapsed(true) } return } if (isSidebarCollapsed && newWidth >= 200) { setIsSidebarCollapsed(false) } const constrainedWidth = Math.min(Math.max(newWidth, 250), 600) setSidebarWidth(constrainedWidth) } const handleMouseUp = () => { setIsResizing(false) setHasDragged(false) } if (isResizing) { document.body.style.cursor = "col-resize" document.body.style.userSelect = "none" document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) } else { document.body.style.cursor = "" document.body.style.userSelect = "" } return () => { document.body.style.cursor = "" document.body.style.userSelect = "" document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } }, [isResizing, isSidebarCollapsed, sidebarWidth, resizeStartX, hasDragged]) const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !loading) { generateImages() } } const handleSignIn = () => { setSigningIn(true) localStorage.setItem("signing_in", "true") window.location.href = "/api/auth/login" } const latestGeneration = generations[generations.length - 1] const currentImages = latestGeneration?.images || [] const allComplete = completedCount === MODELS.length && !loading return (

{hasRunTest && (

AI Image Generation Benchmark

Compare image generation performance across {MODELS.length} models

Grid:

{[2, 3, 4, 5].map((cols) => ( ))}

{user ? ( ) : ( )}

setPrompt(e.target.value)} onKeyPress={handleKeyPress} disabled={loading} autoFocus className="flex-1 font-mono text-base h-20 sm:h-12" />

{error && (

{error}

)}

)} {!hasRunTest && (

{user ? ( ) : ( )}

AI Image Generation Benchmark

Compare image generation performance across {MODELS.length} models

setPrompt(e.target.value)} onKeyPress={handleKeyPress} disabled={loading} autoFocus className="flex-1 font-mono text-base h-20 sm:h-14" />

{error && (

{error}

)}

{generations.length > 0 && (

{[...generations].reverse().map((generation, reversedIndex) => { const genIndex = generations.length - 1 - reversedIndex const isLatest = genIndex === generations.length - 1 const genSuccessfulImages = generation.images.filter((img) => img.success) const genAllComplete = isLatest ? allComplete : true return (

Prompt: {generation.prompt}

{new Date(generation.timestamp).toLocaleString()}

{/* Main content area - full width on mobile, constrained on desktop */}

{/* Sidebar - below content on mobile, beside on desktop */}

{isSidebarCollapsed && isLatest && (

setIsHoveringCollapsedArea(true)} onMouseLeave={() => setIsHoveringCollapsedArea(false)} onMouseDown={handleMouseDown} style={{ width: "48px", height: "100%", cursor: "pointer", }} > {isHoveringCollapsedArea && (

)}

)} {!isSidebarCollapsed && ( <> {isLatest && (

setIsHoveringHandle(true)} onMouseLeave={() => setIsHoveringHandle(false)} style={{ width: "16px" }} >

{(isHoveringHandle || isResizing) && ( <>

)}

= 1024 ? `${sidebarWidth}px` : "100%", }} >

Summary

{!genAllComplete && loading ? (

{[...Array(Math.min(completedCount || 5, MODELS.length))].map((_, i) => (

))}

) : ( genSuccessfulImages.length > 0 && )}

{isLatest && history.length >= 2 && ( )}

)}

) })}

)}

setExpandedImage(null)} /> setShowHowItWorks(false)} /> {showSignInModal && setShowSignInModal(false)} currentGenerations={generations} />} {showLimitReachedModal && setShowLimitReachedModal(false)} />}

) } [V0_FILE]typescriptreact:file="components/auth/limit-reached-modal.tsx" isEdit="true" isMerged="true" "use client" import { X, ExternalLink } from "lucide-react" import { Button } from "@/components/ui/button" type LimitReachedModalProps = { onClose: () => void } export function LimitReachedModal({ onClose }: LimitReachedModalProps) { return (

e.stopPropagation()}>

You've reached your limit

You've used all 5 free prompts. Want to create your own unlimited AI Image Generation Benchmark?

Create Your Own Benchmark

Clone this template in v0 and deploy your own version with unlimited prompts. Customize the models, add your own features, and make it yours.

Free to clone • Deploy in minutes • Customize everything

) } [V0_FILE]typescriptreact:file="components/benchmark/historical-chart.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Maximize2, Download, X } from "lucide-react" import { toPng } from "html-to-image" import type { TestResult, ModelConfig } from "@/lib/types" type HistoricalChartProps = { history: TestResult[] models: ModelConfig[] onClearHistory: () => void compact?: boolean } type HoveredPoint = { testIndex: number modelId: string modelName: string provider: string duration: string color: string } const CHART_COLORS = [ "#3b82f6", // blue "#10b981", // emerald "#f59e0b", // amber "#ef4444", // red "#a855f7", // purple "#06b6d4", // cyan "#ec4899", // pink "#84cc16", // lime "#f97316", // orange "#14b8a6", // teal ] const ChartSVG = ({ id, compact, history, models, hoveredPoint, setHoveredPoint, selectedModels, toggleModel, maxTime, }: { id: string compact: boolean history: TestResult[] models: ModelConfig[] hoveredPoint: HoveredPoint | null setHoveredPoint: (point: HoveredPoint | null) => void selectedModels: Set toggleModel: (modelId: string) => void maxTime: number }) => { const width = compact ? 400 : 800 const height = compact ? 180 : 400 const marginLeft = compact ? 30 : 60 const marginRight = compact ? 20 : 40 const marginTop = compact ? 20 : 40 const marginBottom = compact ? 20 : 60 const chartWidth = width - marginLeft - marginRight const chartHeight = height - marginTop - marginBottom const fontSize = compact ? 8 : 12 const pointRadius = compact ? 3 : 5 const lineWidth = compact ? 2 : 3 return ( ) } export function HistoricalChart({ history, models, onClearHistory, compact = false }: HistoricalChartProps) { const [hoveredPoint, setHoveredPoint] = useState(null) const [selectedModels, setSelectedModels] = useState>(new Set(models.map((m) => m.id))) const [isFullscreen, setIsFullscreen] = useState(false) useEffect(() => { if (isFullscreen) { document.body.style.overflow = "hidden" } else { document.body.style.overflow = "" } return () => { document.body.style.overflow = "" } }, [isFullscreen]) useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape" && isFullscreen) { setIsFullscreen(false) } } if (isFullscreen) { window.addEventListener("keydown", handleEscape) } return () => { window.removeEventListener("keydown", handleEscape) } }, [isFullscreen]) if (history.length < 2) { return (

Need at least 2 prompts for historical chart

) } const allDurations = history.flatMap((test) => test.results.filter((r) => r.success).map((r) => r.durationMs)) const maxTime = Math.max(...allDurations, 1) const toggleModel = (modelId: string) => { setSelectedModels((prev) => { const next = new Set(prev) if (next.has(modelId)) { next.delete(modelId) } else { next.add(modelId) } return next }) } const downloadChart = async () => { try { const container = document.getElementById("fullscreen-download-container") if (!container) { console.error("Container not found") return } const dataUrl = await toPng(container, { quality: 1, pixelRatio: 2, backgroundColor: "#09090b", skipFonts: true, cacheBust: true, }) const link = document.createElement("a") link.download = `benchmark-history-${Date.now()}.png` link.href = dataUrl link.click() } catch (error) { // Error is expected from CORS issues with external fonts but doesn't affect download } } return ( <>

Historical Performance

{history.length} test runs

{hoveredPoint && (

{hoveredPoint.modelName}

{hoveredPoint.provider}

Duration: {hoveredPoint.duration}

)}

Model Legend

{models.map((model, modelIndex) => { const lineColor = CHART_COLORS[modelIndex % CHART_COLORS.length] const isSelected = selectedModels.has(model.id) return ( ) })}

{/* Header */}

Performance History

{history.length} test runs across all models

{/* Chart */}

{}} selectedModels={selectedModels} toggleModel={toggleModel} maxTime={maxTime} />

{/* Legend */}

Model Legend

{models.map((model, modelIndex) => { const lineColor = CHART_COLORS[modelIndex % CHART_COLORS.length] const isSelected = selectedModels.has(model.id) return (

{model.name} ({model.provider})

) })}

{isFullscreen && (

setIsFullscreen(false)} >

e.stopPropagation()}> {/* Header */}

Performance History

{history.length} test runs across all models

{/* Chart */}

{hoveredPoint && (

{hoveredPoint.modelName}

{hoveredPoint.provider}

Duration: {hoveredPoint.duration}

)}

{/* Legend */}

Model Legend

{models.map((model, modelIndex) => { const lineColor = CHART_COLORS[modelIndex % CHART_COLORS.length] const isSelected = selectedModels.has(model.id) return ( ) })}

)} ) }

Parallel Benchmarking

What We Measure

Visualizations

Providers

Fair Testing

{image.modelName}

Sign in to continue

AI Image Generation Benchmark

AI Image Generation Benchmark

Prompt: {generation.prompt}

Summary

You've reached your limit

Create Your Own Benchmark

Historical Performance

Performance History

Performance History

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This